<template>
    <div class="contract">
        <div class="nav_box">
            <van-nav-bar title="合同信息"  left-arrow @click-left="router.back()" >
               
            </van-nav-bar>
        </div>
        <div class="contract_content">
            <van-form ref="form" validate-first scroll-to-error>
                <div class="supplier_detail_content_div supplier_detail_content_divorder">
                    <div class="label">合同类型</div>
                    <div class="value">{{ datas.type }}</div>
                </div>
                <div class="supplier_detail_content_div supplier_detail_content_divorder">
                    <div class="label">供应商名称</div>
                    <div class="value">{{ detailInfo.supplierName }}</div>
                </div>
                <div class="supplier_detail_content_div supplier_detail_content_divorder">
                    <div class="label" v-if="datas.id">签订日期</div>
                    <div class="value" v-if="datas.id">{{ queryParams.signTime }}</div>
                    <van-field v-model="queryParams.signTime" is-link readonly name="datePicker" label="签订日期"
                        input-align="right" error-message-align="right" v-if="!datas.id" placeholder="点击选择时间"
                        @click="showdate = true" :rules="[{ required: true, trigger: 'onBlur', message: '请选择' }]" />
                    <van-popup v-model:show="showdate" position="bottom">
                        <van-date-picker v-model="currentDate" @confirm="onConfirm" @cancel="showdate = false" />
                    </van-popup>
                </div>
                <div class="supplier_detail_content_div ">
                    <div class="label" v-if="datas.id">对接人</div>
                    <div class="value" v-if="datas.id">{{ queryParams.dockingBy }}</div>
                    <van-field name="dockingBy" label="对接人" v-model="queryParams.dockingBy" placeholder="请输入"
                        input-align="right" error-message-align="right" v-if="!datas.id"
                        :rules="[{ required: true, trigger: 'onBlur', message: '请输入' }]" />
                </div>
                <div class="file_pre" v-show="queryParams.contractFile.length > 0">
                    <van-image :src="pdfImage" />
                    <div class="describe">
                        <div class="titles">{{ fileName }}</div>
                        <div calss="size">文件大小：{{ fileSize }}MB</div>
                    </div>
                </div>
                <div class="button" v-show="queryParams.contractFile.length > 0">
                    <van-button round block type="primary" @click="downloadExcel" v-throttle:click>
                        预览
                    </van-button>

                </div>
                <div style="width: 100%;margin-top: 70%;" v-if="!datas.id">
                    <van-button round block type="primary" native-type="submit" @click="onClickRight" v-throttle:click>
                        保存
                    </van-button>
                </div>
            </van-form>
        </div>

    </div>

</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router'
import { loginStore } from "@/store/login";
import { storeToRefs } from "pinia";
import { getcontract, addContract } from '@/api/supplierList/index'
import { showSuccessToast } from 'vant';
import { getEnvValue } from "@/utils/index";
const route = useRoute()
const router = useRouter()
const detailInfo = ref<any>({})
const store = loginStore();
const { token } = storeToRefs(store);
const fileName = ref()
const fileSize = ref()
const pdfImage = new URL('@/assets/newui/details/icon_pdf@2x.png', import.meta.url).href
const form = ref()

const today = new Date();
const year = today.getFullYear();
const month = today.getMonth() + 1;
const date = today.getDate();
const currentDate = ref([year + '', month < 10 ? ('0' + month) : month + '', date < 10 ? ('0' + date) : date + '']);

/** 商品id */
const datas = computed(() => {
    return route.query
})

const queryParams = ref<{
    signTime: string,
    signBy: string,
    dockingBy: string,
    contractFile: any
}>({
    signTime: '',
    signBy: '',
    dockingBy: '',
    contractFile: []
})
const contractFile = ref<any[]>([])
const showdate = ref(false)

const onConfirm = ({ selectedValues }) => {
    queryParams.value.signTime = selectedValues.join('/');
    showdate.value = false;
}


const getInfo = async () => {
    detailInfo.value = JSON.parse(datas.value.detailInfo as any)
    // 上传过合同
    if (datas.value.id) {
        const res = await getcontract(datas.value.id)
        queryParams.value.signTime = res.data.signTime
        queryParams.value.signBy = res.data.signBy
        queryParams.value.dockingBy = res.data.dockingBy
        fileName.value = res.data.fileName
        fileSize.value = res.data.fileSize
        contractFile.value = res.data.contractFile
        queryParams.value.contractFile = [
            {
                name: res.data.contractFile
            }
        ]
    } else {

    }
}
getInfo()

/** 保存 */
const onClickRight = () => {
    form.value.validate().then(async () => {
        const dataObj = JSON.parse(datas.value.detailInfo as any)
        const queryParam = JSON.parse(JSON.stringify(queryParams.value))
        queryParam.contractFile = contractFile.value.join(',')
        await addContract({
            ...queryParam,
            contractType: datas.value.type,
            supplierId: dataObj.id,
            fileName: fileName.value,
            fileSize: fileSize.value
        })
        showSuccessToast({ type: 'success', message: '合同信息新增成功' });
        router.back()
    }).catch((err) => {
        console.warn(err)
    })


}
/** 下载 */
const downloadExcel = async () => {
    (window as any).uni.webView.postMessage({
        data: {
            type: 'download',
            url: getEnvValue("VITE_APP_PIC_URL") + contractFile.value,
            header: {
                Authorization: `Bearer ${token.value}`,
                clientid: 'e5cd7e4891bf95d1d19206ce24a7b32e'
            }
        }
    })

}

(window as any).msgFromUniapp = function (arg) {
    if (arg.name == 'contractFile') {
    }
}

</script>
<style lang="less" scoped>
.contract {
    width: 100%;
    background-color: #F6FAFF;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    padding: 0 15px;
    padding-top: 100px;
    padding-bottom: 94px;
    min-height:100vh ;


    .nav_box {
        height: 90px;
        width: 100vw;
        box-sizing: border-box;
        padding-top: 44px;
        background: linear-gradient(0deg, #FFFFFF 0%, #CDECFF 100%);
        position: fixed;
        z-index: 3000;
        top: 0;
        left: 0;
    }


    :deep(.van-cell) {
        padding: 0;
    }

    :deep(.van-cell:after) {
        display: none;
    }

    .values {
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        .imgList {
            position: relative;

            :deep(.van-icon) {
                position: absolute;
                top: 0;
                z-index: 100;
                right: 4px;
                font-size: 10px;
                height: 15px;
                width: 15px;
                background-color: #000;
                border-bottom-left-radius: 16px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            :deep(.van-icon-cross:before) {
                margin: 0 0 1px 2px;
            }
        }

        :deep(.van-image__img) {
            width: 77px;
            height: 77px;
        }
    }

    .contract_content {
        width: 100%;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 5px;
        font-size: 13px;
        padding: 0 15px;
        height: 0;
        flex: 1;

        :deep(.van-form) {
            height: 100%;
        }

        :deep(.van-field__control) {
            line-height: 24px !important;
        }

        .supplier_detail_content_div {
         
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;

            .value {
                font-weight: 400;
                font-size: 14px;
                color: #1A1B1C;
                line-height: 14px;
            }

            .label {
                width: 100px;
                font-weight: 400;
                font-size: 14px;
                color: #464E5D;
                line-height: 14px;
            }
        }

        .supplier_detail_content_divs {
            min-height: 45px;
            width: 90%;
            margin-left: 5%;
            display: flex;
            justify-content: space-between;
            // align-items: center;
        }

        .supplier_detail_content_divorder {
            border-bottom: 1px solid #F3F3FF;
        }
    }

    .file_pre {
        width: 100%;
        height: 100px;
        margin-top: 55px;
        background-color: #fff;
        box-sizing: border-box;
        // border-radius: 3px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center;

        .describe {
            margin-left: 20px;
            max-width: 240px;

            .titles {
                width: 100%;
                height: 25px;
                line-height: 25px;
                white-space: nowrap;
                /* 确保文本在一行内显示 */
                overflow: hidden;
                /* 隐藏溢出的内容 */
                text-overflow: ellipsis;
                /* 使用省略号表示文本溢出 */
            }

            .size {
                height: 25px;
                line-height: 25px;
                color: #A3A3A3;
            }
        }

        :deep(.van-image__img) {
            width: 50px;
            height: 50px;
        }
    }

    .button {
        width: 100%;
        height: 84px;
        box-sizing: border-box;
        font-size: 13px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        z-index: 3000;
        bottom: 0px;
        left: 0px;
        background-color: #fff;
        box-shadow: 0px 0px 8px 0px rgba(189,195,204,0.5);
        padding: 20px 15px;


        .dowload {
            width: 100%;
            height: 100%;
            border-radius: 23px;
            text-align: center;
            line-height: 30px;
            background-color: #0094FF;
            color: #fff;
        }
    }

}

:deep(.van-field__control) {
    color: #B8BECA !important;
}

:deep(.van-icon-arrow:before) {
    color: #B8BECA !important;
}
:deep(.van-nav-bar){
    background-color: #1466ff00;
    height: 46px !important;
    width: 100%;
    position: fixed;
}

:deep(.van-nav-bar__content){
    background-color: #1466ff00;
}
</style>